{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 基本水球图"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-04-08T12:37:40.839246Z",
     "start_time": "2021-04-08T12:37:40.566168Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"e4ccc6bee24c4cb0b16f0f8975d172ba\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_e4ccc6bee24c4cb0b16f0f8975d172ba = echarts.init(\n",
       "                    document.getElementById('e4ccc6bee24c4cb0b16f0f8975d172ba'), 'white', {renderer: 'canvas'});\n",
       "                var option_e4ccc6bee24c4cb0b16f0f8975d172ba = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.6,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u57fa\\u672c\\u5f62\\u72b6\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_e4ccc6bee24c4cb0b16f0f8975d172ba.setOption(option_e4ccc6bee24c4cb0b16f0f8975d172ba);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x111e25130>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Liquid\n",
    "\n",
    "c = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.6, 0.7])\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"基本形状\"))\n",
    ")\n",
    "c.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 改变水球图的形状和颜色\n",
    "通过设置以下参数，可以变换水球的形状和颜色\n",
    "\n",
    "- color：改变水的颜色，注意，颜色是列表形式 \n",
    "- shape：改变形状，水球外形，有' circle', 'rect', 'roundRect', 'triangle'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-04-08T12:37:40.846010Z",
     "start_time": "2021-04-08T12:37:40.841068Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"5c9c2eceba4d48918d89dc3ae6e55d5f\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_5c9c2eceba4d48918d89dc3ae6e55d5f = echarts.init(\n",
       "                    document.getElementById('5c9c2eceba4d48918d89dc3ae6e55d5f'), 'white', {renderer: 'canvas'});\n",
       "                var option_5c9c2eceba4d48918d89dc3ae6e55d5f = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.3,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#4B0082\"\n",
       "            ],\n",
       "            \"shape\": \"triangle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-Shape-rect\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_5c9c2eceba4d48918d89dc3ae6e55d5f.setOption(option_5c9c2eceba4d48918d89dc3ae6e55d5f);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x111d960a0>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Liquid\n",
    "from pyecharts.globals import SymbolType\n",
    "\n",
    "c = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.3, 0.7], shape=SymbolType.TRIANGLE,\n",
    "         color=['#4B0082'])\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-Shape-rect\"))\n",
    ")\n",
    "c.render_notebook()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 不显示外边框，多波浪\n",
    "\n",
    "- is_outline_show：控制外边框"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-04-08T12:37:40.852863Z",
     "start_time": "2021-04-08T12:37:40.848108Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"12c0112a4abb42f4a764a1435770d5ca\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_12c0112a4abb42f4a764a1435770d5ca = echarts.init(\n",
       "                    document.getElementById('12c0112a4abb42f4a764a1435770d5ca'), 'white', {renderer: 'canvas'});\n",
       "                var option_12c0112a4abb42f4a764a1435770d5ca = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.67,\n",
       "                0.3,\n",
       "                0.15\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#294D99\",\n",
       "                \"#156ACF\",\n",
       "                \"#1598ED\",\n",
       "                \"#45BDFF\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": false,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 50\n",
       "            }\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"Liquid-Shape-rect\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_12c0112a4abb42f4a764a1435770d5ca.setOption(option_12c0112a4abb42f4a764a1435770d5ca);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x111e62c10>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Liquid\n",
    "from pyecharts.globals import SymbolType\n",
    "\n",
    "c = (\n",
    "    Liquid()\n",
    "    .add(\"lq\",[0.67, 0.30, 0.15], is_outline_show=False)\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Liquid-Shape-rect\"))\n",
    ")\n",
    "c.render_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 多个水球图显示\n",
    "\n",
    "将水球按一定规则摆放在一起，用来展示多个数据指标，将会非常美观"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2021-04-08T12:37:40.868147Z",
     "start_time": "2021-04-08T12:37:40.855128Z"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<script>\n",
       "    require.config({\n",
       "        paths: {\n",
       "            'echarts':'https://assets.pyecharts.org/assets/echarts.min', 'echarts-liquidfill':'https://assets.pyecharts.org/assets/echarts-liquidfill.min'\n",
       "        }\n",
       "    });\n",
       "</script>\n",
       "\n",
       "        <div id=\"3f62ecaf616d4bdfb37a4893fe22269d\" style=\"width:900px; height:500px;\"></div>\n",
       "\n",
       "<script>\n",
       "        require(['echarts', 'echarts-liquidfill'], function(echarts) {\n",
       "                var chart_3f62ecaf616d4bdfb37a4893fe22269d = echarts.init(\n",
       "                    document.getElementById('3f62ecaf616d4bdfb37a4893fe22269d'), 'white', {renderer: 'canvas'});\n",
       "                var option_3f62ecaf616d4bdfb37a4893fe22269d = {\n",
       "    \"animation\": true,\n",
       "    \"animationThreshold\": 2000,\n",
       "    \"animationDuration\": 1000,\n",
       "    \"animationEasing\": \"cubicOut\",\n",
       "    \"animationDelay\": 0,\n",
       "    \"animationDurationUpdate\": 300,\n",
       "    \"animationEasingUpdate\": \"cubicOut\",\n",
       "    \"animationDelayUpdate\": 0,\n",
       "    \"color\": [\n",
       "        \"#c23531\",\n",
       "        \"#2f4554\",\n",
       "        \"#61a0a8\",\n",
       "        \"#d48265\",\n",
       "        \"#749f83\",\n",
       "        \"#ca8622\",\n",
       "        \"#bda29a\",\n",
       "        \"#6e7074\",\n",
       "        \"#546570\",\n",
       "        \"#c4ccd3\",\n",
       "        \"#f05b72\",\n",
       "        \"#ef5b9c\",\n",
       "        \"#f47920\",\n",
       "        \"#905a3d\",\n",
       "        \"#fab27b\",\n",
       "        \"#2a5caa\",\n",
       "        \"#444693\",\n",
       "        \"#726930\",\n",
       "        \"#b2d235\",\n",
       "        \"#6d8346\",\n",
       "        \"#ac6767\",\n",
       "        \"#1d953f\",\n",
       "        \"#6950a1\",\n",
       "        \"#918597\"\n",
       "    ],\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.6,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#3CB371\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 20,\n",
       "                \"formatter\": function (param) {                    return ('\\u7b2c\\u4e00\\u5b63\\u5ea6\\uff1a'+Math.floor(param.value * 10000) / 100) + '%';                }\n",
       "            },\n",
       "            \"center\": [\n",
       "                \"13%\",\n",
       "                \"60%\"\n",
       "            ],\n",
       "            \"xAxisIndex\": 0,\n",
       "            \"yAxisIndex\": 0\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.5554\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#87CEEB\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 20,\n",
       "                \"formatter\": function (param) {                    return ('\\u7b2c\\u4e8c\\u5b63\\u5ea6\\uff1a'+Math.floor(param.value * 10000) / 100) + '%';                }\n",
       "            },\n",
       "            \"center\": [\n",
       "                \"38%\",\n",
       "                \"60%\"\n",
       "            ],\n",
       "            \"xAxisIndex\": 1,\n",
       "            \"yAxisIndex\": 1\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.63,\n",
       "                0.7\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#FAFAD2\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 20,\n",
       "                \"formatter\": function (param) {                    return ('\\u7b2c\\u4e09\\u5b63\\u5ea6\\uff1a'+Math.floor(param.value * 10000) / 100) + '%';                }\n",
       "            },\n",
       "            \"center\": [\n",
       "                \"63%\",\n",
       "                \"60%\"\n",
       "            ],\n",
       "            \"xAxisIndex\": 2,\n",
       "            \"yAxisIndex\": 2\n",
       "        },\n",
       "        {\n",
       "            \"type\": \"liquidFill\",\n",
       "            \"name\": \"lq\",\n",
       "            \"data\": [\n",
       "                0.4954\n",
       "            ],\n",
       "            \"waveAnimation\": true,\n",
       "            \"animationDuration\": 2000,\n",
       "            \"animationDurationUpdate\": 1000,\n",
       "            \"color\": [\n",
       "                \"#C0C0C0\"\n",
       "            ],\n",
       "            \"shape\": \"circle\",\n",
       "            \"backgroundStyle\": {},\n",
       "            \"outline\": {\n",
       "                \"show\": true,\n",
       "                \"borderDistance\": 8\n",
       "            },\n",
       "            \"label\": {\n",
       "                \"show\": true,\n",
       "                \"position\": \"inside\",\n",
       "                \"margin\": 8,\n",
       "                \"fontSize\": 20,\n",
       "                \"formatter\": function (param) {                    return ('\\u7b2c\\u56db\\u5b63\\u5ea6\\uff1a'+Math.floor(param.value * 10000) / 100) + '%';                }\n",
       "            },\n",
       "            \"center\": [\n",
       "                \"88%\",\n",
       "                \"60%\"\n",
       "            ],\n",
       "            \"xAxisIndex\": 3,\n",
       "            \"yAxisIndex\": 3\n",
       "        }\n",
       "    ],\n",
       "    \"legend\": [\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {}\n",
       "        },\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {},\n",
       "            \"show\": true,\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10,\n",
       "            \"itemWidth\": 25,\n",
       "            \"itemHeight\": 14\n",
       "        },\n",
       "        {\n",
       "            \"data\": [],\n",
       "            \"selected\": {}\n",
       "        }\n",
       "    ],\n",
       "    \"tooltip\": {\n",
       "        \"show\": true,\n",
       "        \"trigger\": \"item\",\n",
       "        \"triggerOn\": \"mousemove|click\",\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"line\"\n",
       "        },\n",
       "        \"showContent\": true,\n",
       "        \"alwaysShowContent\": false,\n",
       "        \"showDelay\": 0,\n",
       "        \"hideDelay\": 100,\n",
       "        \"textStyle\": {\n",
       "            \"fontSize\": 14\n",
       "        },\n",
       "        \"borderWidth\": 0,\n",
       "        \"padding\": 5\n",
       "    },\n",
       "    \"title\": [\n",
       "        {\n",
       "            \"text\": \"\\u591a\\u4e2a Liquid \\u663e\\u793a\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"text\": \"\\u591a\\u4e2a Liquid \\u663e\\u793a\",\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        },\n",
       "        {\n",
       "            \"padding\": 5,\n",
       "            \"itemGap\": 10\n",
       "        }\n",
       "    ],\n",
       "    \"grid\": [\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        },\n",
       "        {\n",
       "            \"show\": false,\n",
       "            \"zlevel\": 0,\n",
       "            \"z\": 2,\n",
       "            \"containLabel\": false,\n",
       "            \"backgroundColor\": \"transparent\",\n",
       "            \"borderColor\": \"#ccc\",\n",
       "            \"borderWidth\": 1\n",
       "        }\n",
       "    ]\n",
       "};\n",
       "                chart_3f62ecaf616d4bdfb37a4893fe22269d.setOption(option_3f62ecaf616d4bdfb37a4893fe22269d);\n",
       "        });\n",
       "    </script>\n"
      ],
      "text/plain": [
       "<pyecharts.render.display.HTML at 0x118537f70>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Grid, Liquid\n",
    "from pyecharts.commons.utils import JsCode\n",
    "\n",
    "l1 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.6, 0.7], \n",
    "         center=[\"13%\", \"60%\"],\n",
    "         color=['#3CB371'],\n",
    "         label_opts=opts.LabelOpts(\n",
    "         font_size=20,\n",
    "         formatter=JsCode(\n",
    "            \"\"\"function (param) {\n",
    "                    return ('第一季度：'+Math.floor(param.value * 10000) / 100) + '%';\n",
    "                }\"\"\"\n",
    "        ),\n",
    "        position=\"inside\",\n",
    "    ),)\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"多个 Liquid 显示\"))\n",
    ")\n",
    "\n",
    "l2 = Liquid().add(\n",
    "    \"lq\",\n",
    "    [0.5554],\n",
    "    center=[\"38%\", \"60%\"],\n",
    "    color=['#87CEEB'],\n",
    "    label_opts=opts.LabelOpts(\n",
    "        font_size=20,\n",
    "        formatter=JsCode(\n",
    "            \"\"\"function (param) {\n",
    "                    return ('第二季度：'+Math.floor(param.value * 10000) / 100) + '%';\n",
    "                }\"\"\"\n",
    "        ),\n",
    "        position=\"inside\",\n",
    "    ),\n",
    ")\n",
    "\n",
    "l3 = (\n",
    "    Liquid()\n",
    "    .add(\"lq\", [0.63, 0.7], \n",
    "         center=[\"63%\", \"60%\"],\n",
    "         color=['#FAFAD2'],\n",
    "         label_opts=opts.LabelOpts(\n",
    "         font_size=20,\n",
    "         formatter=JsCode(\n",
    "            \"\"\"function (param) {\n",
    "                    return ('第三季度：'+Math.floor(param.value * 10000) / 100) + '%';\n",
    "                }\"\"\"\n",
    "        ),\n",
    "        position=\"inside\",\n",
    "    ),)\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"多个 Liquid 显示\"))\n",
    ")\n",
    "\n",
    "l4 = Liquid().add(\n",
    "    \"lq\",\n",
    "    [0.4954],\n",
    "    center=[\"88%\", \"60%\"],\n",
    "    color=['#C0C0C0'],\n",
    "    label_opts=opts.LabelOpts(\n",
    "        font_size=20,\n",
    "        formatter=JsCode(\n",
    "            \"\"\"function (param) {\n",
    "                    return ('第四季度：'+Math.floor(param.value * 10000) / 100) + '%';\n",
    "                }\"\"\"\n",
    "        ),\n",
    "        position=\"inside\",\n",
    "    ),\n",
    ")\n",
    "grid = Grid().add(l1, grid_opts=opts.GridOpts()).add(l2, grid_opts=opts.GridOpts()).add(l3, grid_opts=opts.GridOpts()).add(l4, grid_opts=opts.GridOpts())\n",
    "grid.render_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.6"
  },
  "nbTranslate": {
   "displayLangs": [
    "*"
   ],
   "hotkey": "alt-t",
   "langInMainMenu": true,
   "sourceLang": "en",
   "targetLang": "fr",
   "useGoogleTranslate": true
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
